<!-- 预支付列表 -->
<template>
  <div class="page-main">
    <CustomForm :formInline="formInline" @onSubmit="onSubmit" @resetTable="resetTable">
      <el-form-item label="司机名称">
        <el-input v-model="formInline.driver_name" placeholder="请输入司机名称"></el-input>
      </el-form-item>
      <el-form-item label="运单ID">
        <el-input v-model="formInline.bill_id" placeholder="请输入运单ID"></el-input>
      </el-form-item>
      <!-- <el-form-item label="公司名称">
        <el-input v-model="formInline.company_name" placeholder="请输入公司名称"></el-input>
      </el-form-item> -->
      <el-form-item label="支付状态">
        <el-select v-model="formInline.status" @change="changeStatusSelect" placeholder="选择支付状态">
          <el-option :value="-1" label="全部"></el-option>
          <el-option :value="0" label="支付中"></el-option>
          <el-option :value="1" label="支付成功"></el-option>
          <el-option :value="2" label="支付失败"></el-option>
          <el-option :value="3" label="申请中"></el-option>
          <el-option :value="4" label="拒绝申请"></el-option>
          <el-option :value="5" label="过期"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="申请时间">
        <el-date-picker
          v-model="pickerDateArr"
          type="daterange"
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          value-format="yyyy-MM-dd"
          @change="(data) => changeDatePicker(data, 'goods')"
        ></el-date-picker>
      </el-form-item>
    </CustomForm>
    <CustomDescriptions :data="descriptionsData" :styleBox="{ width: '100%' }"></CustomDescriptions>
    <el-table :data="list" style="width: 100%" height="620" v-loading="tableloading">
      <el-table-column
        prop="id"
        label="自增ID"
        width="110"
        align="center"
        :show-overflow-tooltip="true"
      ></el-table-column>
      <el-table-column
        prop="add_id"
        label="运单ID"
        width="110"
        align="center"
        :show-overflow-tooltip="true"
      >
      <template slot-scope="scope">
          <span>{{ scope.row.add_id + '-' + scope.row.yund_id }}</span>
        </template>
      </el-table-column>
      <el-table-column
        prop="apply_money"
        width="120"
        label="预支付金额(元)"
        align="center"
        :show-overflow-tooltip="true"
      >
        <template slot-scope="scope">
          <span style="color: #DC143C;">{{ scope.row.apply_money }}</span>
        </template>
      </el-table-column>
        <el-table-column
          prop="commission"
          width="100"
          label="手续费(元)"
          align="center"
          :show-overflow-tooltip="true"
        >
          <template slot-scope="scope">
            <span style="color: blue;">{{ scope.row.commission }}</span>
          </template>
        </el-table-column>

        <el-table-column
          prop="bankcard_name"
          label="收款人"
          align="center"
          :show-overflow-tooltip="true"
        >
          <template slot-scope="scope">
              {{ $maskString(scope.row.bankcard_name) }}
          </template> 
        </el-table-column>
        <el-table-column
          prop="bankcard_number"
          label="收款账号"
          align="center"
          width="180"
          :show-overflow-tooltip="true"
        >
        <template slot-scope="scope">
              {{ $maskString(scope.row.bankcard_number) }}
          </template> 
        </el-table-column>
        <el-table-column prop="bank_name" label="收款银行" align="center" :show-overflow-tooltip="true"></el-table-column>

      <el-table-column label="实际支付金额(元)" width="140" align="center" :show-overflow-tooltip="true">
        <template slot-scope="scope">
          <span style="color: #c00;">
            {{ minusRealMoney(scope.row.apply_money,
            scope.row.commission)
            }}
          </span>
        </template>
      </el-table-column>
      <el-table-column prop="add_time" label="申请时间" align="center" :show-overflow-tooltip="true"></el-table-column>
      <el-table-column
        prop="confirm_time"
        label="确认支付时间"
        align="center"
        :show-overflow-tooltip="true"
      >
        <template slot-scope="scope">
          <span v-if="scope.row.confirm_time == '1970-01-01 08:00:00'">暂无</span>
          <span v-else>{{ scope.row.confirm_time }}</span>
        </template>
      </el-table-column>

      <el-table-column
        prop="driver_name"
        label="司机姓名"
        width="100"
        align="center"
        :show-overflow-tooltip="true"
      ></el-table-column>
      <el-table-column prop="driver_car" label="车辆信息" align="center" :show-overflow-tooltip="true"></el-table-column>

      <el-table-column
        prop="company_name"
        label="公司名称"
        align="center"
        :show-overflow-tooltip="true"
      ></el-table-column>
      <el-table-column prop="name" label="支付状态" align="center" :show-overflow-tooltip="true">
        <template slot-scope="scope">
          <span v-if="scope.row.status == 0" style="color:chocolate">支付中</span>
          <span v-else-if="scope.row.status == 1" style="color:green">支付成功</span>
          <span v-else-if="scope.row.status == 2" style="color:red">支付失败</span>
          <span v-else-if="scope.row.status == 3" style="color:#30B08F">申请中</span>
          <span v-else-if="scope.row.status == 4" style="color:#324157">拒绝申请</span>
          <span v-else-if="scope.row.status == 5" style="color:#324157">过期</span>
        </template>
      </el-table-column>
    </el-table>

    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page.sync="formInline.page"
      :page-sizes="[10, 20, 30, 50, 70, 80, 100]"
      :page-size="formInline.pageSize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total"
    ></el-pagination>
  </div>
</template>

<script>
import Big from "big.js";
import { advancePaymentList } from "@/api/businessUser/moneyManagment";
export default {
  //import引入的组件需要注入到对象中才能使用
  components: {},
  data() {
    //这里存放数据
    return {
      formInline: {
        bill_id:'',
        driver_name: "",
        status: -1,
        time: "",
        page: 1,
        pageSize: 10
      },
      list: [],
      tableloading: false,
      pickerDateArr: "",
      total: 0,
      descriptionsData: [
        {
          label: "支付总金额",
          count: 0,
          unit: "(元)"
        },
        {
          label: "手续费",
          count: 0,
          unit: "(元)"
        },
        {
          label: "总单数",
          count: 0,
          unit: "(单)"
        }
      ]
    };
  },
  //监听属性 类似于data概念
  computed: {},
  //监控data中的数据变化
  watch: {},
  //方法集合
  methods: {
    async advancePaymentList() {
      let res = await advancePaymentList(this.formInline);
      if (res.code == 200) {
        this.list = res.data ? res.data.list.data : [];
        this.total = res.data ? res.data.list.total : 0;
        this.descriptionsData[1].count = res.data.commission;
        this.descriptionsData[0].count = res.data.driverMoney;
        this.descriptionsData[2].count = res.data.list.total;
      }
    },
    changeDatePicker(data) {
      this.formInline.time = data.join(" - ");
    },
    onSubmit() {
      this.formInline.page = 1;
      this.advancePaymentList();
    },
    resetTable() {
      this.formInline = {
        driver_name: "",
        status: -1,
        time: "",
        company_name: ""
      };
      this.pickerDateArr = "";
      this.advancePaymentList();
    },
    handleSizeChange(pageSzie) {
      this.formInline.pageSize = pageSzie;
      this.formInline.page = 1;
      this.advancePaymentList();
    },
    handleCurrentChange(page) {
      this.formInline.page = page;
      this.advancePaymentList();
    },
    changeStatusSelect() {
      this.advancePaymentList();
    },
    minusRealMoney(a, b) {
      let prePayMoney = new Big(a);
      let otherMoney = new Big(b);
      return prePayMoney.minus(otherMoney).toString();
    }
  },
  //生命周期 - 创建完成（可以访问当前this实例）
  created() {},
  //生命周期 - 挂载完成（可以访问DOM元素）
  mounted(option) {
    if(this.$route.query.yund_id){
      this.formInline.bill_id = this.$route.query.yund_id;
    }
    this.advancePaymentList();
  },
  beforeCreate() {}, //生命周期 - 创建之前
  beforeMount() {}, //生命周期 - 挂载之前
  beforeUpdate() {}, //生命周期 - 更新之前
  updated() {}, //生命周期 - 更新之后
  beforeDestroy() {}, //生命周期 - 销毁之前
  destroyed() {}, //生命周期 - 销毁完成
  activated() {} //如果页面有keep-alive缓存功能，这个函数会触发
};
</script>
<style lang='scss' scoped>
//@import url(); 引入公共css类

::v-deep .el-table {
//   margin-top: 60px;
}

::v-deep .el-pagination {
  margin-top: 20px;
}
</style>